<template>
 <el-container class="home-container">
   <!--头部区域-->	 
   <el-header>
	   <div>
		   <img width="40" src="../assets/logo.png" alt="">
		   <span>电商后台管理系统</span>
	   </div>
      <el-button type="info" @click="logout">退出</el-button>
   </el-header>
    <!--页面主体区域-->
   <el-container>
	   <!--侧边栏-->
     <el-aside :width="isCollapse?'64px':'200px'">
		 
		 <!--左侧菜单的折叠与展开的按钮-->
		 
		 <div @click="toggleCollapse" class="toggle-button">|||</div>
		 
		 <!--侧边栏菜单区-->
		     <el-menu
		       background-color="#333744"
		       text-color="#fff"
		       active-text-color="#409eff"
			   :unique-opened="true"
			   :collapse-transition="false"
			   :collapse="isCollapse"
			   :router="true"
			   :default-active="activePath"><!--路由选中的状态-->
			   <!--详细查看官网-->
			   <!--:router="true"跳转的是item.id-->
			   <!--unique-opened前面不加上：的话，true值会被解释成字符串-->
			   <!--一级菜单-->
			   <!--index属性关系到展开的问题-->
			   <!--index只接受字符串，所以加上.toString()-->
		       <el-submenu :index="item.id.toString()" v-for="item in menuList" :key="item.id">
				 <!--一级菜单模板区域-->
		         <template slot="title">
				   <!--图标--> 	 
		           <i :class="iconsObj[item.id]"></i>
				   <!--文本--> 	
		           <span>{{item.authName}}</span>
		         </template>
				 
                 <!--二级菜单-->
				  <!--index属性关系到点击选中时颜色显示的问题-->
                 <el-menu-item @click="saveNavState('/'+subItem.path)" :index="'/'+subItem.path" v-for="subItem in item.children" :key="subItem.id">
				   <template slot="title">
				     <!--图标--> 	 
				     <i class="el-icon-menu"></i>
				     <!--文本--> 	
				     <span>{{subItem.authName}}</span>
				   </template>
				 </el-menu-item> 
		       </el-submenu>
		       
		     </el-menu>
		
	 </el-aside>
	 <!--右侧main布局-->
     <el-main>
		 <router-view></router-view>
	 </el-main>
   </el-container>
 </el-container>
		
	 
</template>

<script>
	export default{
	    data(){
			return {
				//左侧菜单数据
				menuList:[],
				iconsObj:{
					"125":"iconfont icon-user",
					"103":"iconfont icon-tijikongjian",
					"101":"iconfont icon-shangpin",
					"102":"iconfont icon-danju",
					"145":"iconfont icon-baobiao",
				},
				//是否折叠
				isCollapse:false,
				//激活的链接地址
				activePath:""
			}
		},
		methods:{
			logout(){ //退出功能
				window.sessionStorage.clear(); //就是清空token
				this.$router.push("/login")
			},
			//获取所有的菜单
			async getMenuList(){
				const {data:res}=await this.$http.get("menus");
				console.log("左侧菜单数据：",res);
				if(res.meta.status!==200) return this.$message.error(res.meta.msg);
				this.menuList=res.data;
			},
			//点击按钮 切换菜单的折叠与展开
			toggleCollapse(){
				this.isCollapse=!this.isCollapse;
			},
			//保存链接的激活状态
			saveNavState(activePath){
				window.sessionStorage.setItem("activePath",activePath);
				this.activePath=activePath;
			}
		},
		created(){
			this.getMenuList();
			this.activePath=window.sessionStorage.getItem("activePath");
		}
	}
</script>

<style lang="less" scoped>
	.home-container{
		height: 100%;
	}
	
	.el-header{
		background-color: #373d41;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #fff;
		font-size: 20px;
		>div{
			align-items: center;
			display: flex;
			span{
				margin-left: 15px;
			}
		}
	}
	
	.el-aside{
		background-color: #333744;
		.el-menu{
			border-right: none;  /*去掉右边突出的部分*/
		}
	}
	
	.el-main{
		background-color: #eaedf1;
	}
	
	.iconfont{
		margin-right: 10px;
	}
	
	.toggle-button{
		background-color: #4a5064;
		color: #fff;
		text-align: center;
		font-size: 12px;
		line-height: 24px;
		letter-spacing: 0.2em;
		cursor: pointer;
	}
	
</style>
